<template>
  <div class="markdown-paginator">
    <div class="pagination-controls">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
    <div class="markdown-viewer">
      <vue-markdown :source="content[currentPage - 1]" />
    </div>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  name: 'MarkdownPaginator',
  components: {
    VueMarkdown,
  },
  props: {
    content: {
      type: Array, // 改成数组
      required: true,
    },
  },
  data() {
    return {
      currentPage: 1,
    }
  },
  computed: {
    totalPages() {
      return this.content.length
    },
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages){
        console.log("当前页面:" + this.currentPage)
        this.currentPage++
      }
      console.log("下一页面:" + this.currentPage)
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
  },
}
</script>

<style scoped>
.markdown-paginator {
  max-width: 800px;
  margin: 0 auto;
}
.pagination-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.markdown-viewer {
  border: 1px solid #eee;
  padding: 1rem;
  background: #fff;
  min-height: 300px;
}
</style>
